<template>
  <div class="custom-card">
    <div class="card-content">
      <h2>{{ title }}</h2>
      <p>{{ content }}</p>
      <a v-if="link" :href="link" target="_blank" rel="noopener noreferrer">{{ linkText }}</a>
    </div>
  </div>
</template>

<script setup>
import { defineProps } from 'vue'

defineProps({
  title: String,
  content: String,
  link: String,
  linkText: String,
})
</script>

<style scoped>
.custom-card {
  margin-bottom: 20px;
  border: 1px solid #ddd;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.card-content {
  padding: 10px;
}

.card-content h2 {
  font-size: 18px;
  margin-bottom: 10px;
}

.card-content p {
  font-size: 14px;
  margin-bottom: 10px;
}

.card-content a {
  font-size: 14px;
  color: #409EFF;
}
</style>
